<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('预览考试题')"/>
        <style>

            .item{
                margin: 0px 0px;
            }

            .title{
                font-weight: bold;

            }

            .error-content{
                display: none;
            }
        </style>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <input name="courseDetailId" th:field="${bizCourseExam.courseDetailId}" type="hidden">
            <input name="examId" th:field="${bizCourseExam.id}" type="hidden">
            <form class="form-horizontal m" id="form-exam-edit" th:object="${bizCourseExam}">


                <div class="row item" th:each="exam:*{examList}">
                    <div th:text="${exam._title}" class="col-sm-10 title">题目</div>

                    <div class="col-sm-10" th:if="${exam._type eq 'radio' or exam._type eq 'check'} ">
                        <div th:class="${exam.type}" th:each="sel:${exam._select}">
                            <label ><input required th:type="${exam.type}" th:name="${exam.name}" th:value="${sel.value}">[[${sel._item_title}]]</label>
                        </div>
                        <hr>
                    </div>
                    <div class="col-sm-10" th:if="${exam._type eq 'question' } ">
                        <div th:class="${exam.type}" >
<!--                            <textarea required  th:name="${exam.name}" ></textarea>-->
                            <input type="text" th:name="${exam.name}" class="form-control">
                        </div>
                        <hr>
                    </div>

                </div>
            </form>
            <div class="row" >
                <span class="btn btn-success btn-lg" style="width:100px;margin-left: 40%" onclick="submitHandler()" id="btnSubmit">交 卷</span>
                <span class="btn btn-warning btn-lg" style="width:100px;margin-left: 10px" onclick="$.modal.closeTab();">关 闭</span>
            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight error-content">
            <div class="row">
                <div class="col-sm-10 title" style="color: red">
                    很抱歉，如下题目答错：
                </div>

            </div>
            <div class="row">
                <div class="col-sm-10" id="errorMsg">

                </div>
            </div>
            <div class="row">
                <span class="btn btn-primary btn-lg" style="width:100px;margin-left: 40%" onclick="reExam()">重新答题</span>
            </div>
        </div>
        <th:block th:include="include :: footer"/>
        <script type="text/javascript">
            var prefix = ctx + "biz/exam"
            $("#form-exam-edit").validate({
                                              focusCleanup: true
                                          });

            function submitForm() {
                if ($.validate.form()) {

                    const courseDetailId = $('input[name=courseDetailId]').val()
                    if (!courseDetailId) {
                        $.modal.msgError("请选择所属课程");
                        return false
                    }
                    let data = $('#form-exam-edit').serialize();
                    debugger
                    console.log(data)

                    $.operate.save(prefix + "/edit", data);
                }else{
                    $.modal.msgError("试题必须全部作答才能提交!")
                }
            }

            function submitHandler() {
                let data = $('#form-exam-edit').serializeObject();
                console.log('>>>>>用户答案')
                console.log(data)
                var answers = {}
                for (key in data){
                    if (data[key] instanceof  Array){
                        answers[key] = data[key].join(',')
                    }else{
                        answers[key] = data[key]
                    }
                }
                console.log(answers)
                if ($.validate.form()) {

                    $.modal.loading("请稍等...");
                    const courseDetailId = $('input[name="courseDetailId"]').val()
                    const id = $('input[name="id"]').val()
                    $.post(prefix + '/commitExam', {
                        answers:JSON.stringify(answers),
                        courseDetailId,
                        id
                    }, function (result) {
                        if (result.code == web_status.SUCCESS) {
                            const errorQueryList = result.data.errorQueryList
                            const passed = result.data.passed
                            if (+passed == 1){
                                $.modal.msgSuccess('恭喜您，考试通过');
                                $('#btnSubmit').hide()
                            }else{
                                $('.ibox-content').hide()
                                $('.error-content').show()
                                $('#errorMsg').html('')
                                const template = '<div>msg</div>'
                                for (let i=0;i<errorQueryList.length;i++){
                                    const errMsg = template.replace('msg',errorQueryList[i])
                                    $('#errorMsg').append(errMsg)
                                }
                            }
                        } else {
                            $.modal.alertError(result.msg);
                        }
                        $.modal.closeLoading();

                    });
                }else{
                    console.error('试卷未填写完...')
                }
            }

            function reExam(){
                $('.ibox-content').show()
                $('.error-content').hide()
            }

            $.fn.serializeObject = function() {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function () {
                    if (o[this.name] !== undefined) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
                return o;
            }
        </script>


    </body>
</html>